<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="上传图片"
            ><el-upload v-model:file-list="fileList" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="uploadImgFn" :on-success="uploadImgSuccess">
                <el-icon><Plus /></el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="备注">
            <el-input type="textarea" v-model="name" />
        </el-form-item>
        <el-form-item label=" "><el-button @click="submit_upload()" type="primary">上传</el-button></el-form-item>
    </el-form>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { upload, lunboupload } from "@/api/api/upload";
// import router from "@/router";
// import { useRouter } from "vue-router";
import router from "@/router/index.js";
const name = ref("");
const fileList = ref([]);
const img = ref("");
const uploadRef = ref(null);
onMounted(() => {
    console.log(uploadRef);
});
const submitUpload = () => {
    // console.log(uploadRef);
    uploadRef.value.submit();
};
let uploadImgSuccess = (r) => {
    console.log(r.data.fileUrl);
    img.value = r.data.fileUrl;
};
const uploadImgFn = (options) => {
    console.log(options);
    let fd = new FormData();
    fd.append("img", options.file);
    // console.log(fd);
    return upload(fd);
};
const submit_upload = () => {
    console.log(123);
    let obj = {
        img: img.value,
        alt: name.value,
        link: img.value,
    };
    lunboupload(obj).then((res) => {
        console.log("res", res.data.code);
        if (res.data.code == 200) {
            // alert("上传成功");
            router.push({
                path: "/list/lunbomanage",
            });
        }
    });
};
</script>
<style lang="css" scoped></style>
